<template>
	<div>
	<!--面包屑-->
	<el-breadcrumb separator-class="el-icon-arrow-right">
	  <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
	  <el-breadcrumb-item>商品发布</el-breadcrumb-item>
	</el-breadcrumb>
	<!--内容列表-->
	<el-card>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="商品名称" prop="productName">
       <el-input v-model="ruleForm.productName"></el-input>
     </el-form-item>
     <el-form-item label="商品类别" prop="categoryID">
       <el-select v-model="ruleForm.categoryID" placeholder="请选择商品类别">
         <el-option label="饮料" value="1"></el-option>
         <el-option label="零食" value="2"></el-option>
		 <el-option label="调味品" value="3"></el-option>
		 <el-option label="体育器材" value="4"></el-option>
		 <el-option label="生活用品" value="5"></el-option>
		 <el-option label="其他" value="6"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="生产日期" required>
       <el-col :span="11">
         <el-form-item prop="productDate">
           <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.productDate" style="width: 100%;"></el-date-picker>
         </el-form-item>
       </el-col>
       <el-col class="line" :span="2">-</el-col>
     </el-form-item>
	 <!---->
	 <el-form-item label="单价" prop="price">
	   <el-input v-model="ruleForm.price"></el-input>
	 </el-form-item>
	 
       <el-button type="primary" @click="submitForm('ruleForm')">立即发布</el-button>
       <el-button @click="resetForm('ruleForm')">重置</el-button>
     </el-form-item>
   </el-form>
   </el-card>
   </div>
</template>

<script>

export default {
  name: 'OutHouseView',
  components: {

  },
  data() {
        return {
          ruleForm: {
			productID:'',
            productName: '',
            productDate: '',
            stock: '',
            price: '',
			categoryID:''
          },
          rules: {
            name: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }
            ],
            region: [
              { required: true, message: '请选择活动区域', trigger: 'change' }
            ],
            date1: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            date2: [
              { required: true, message: '请输入单价', trigger: 'blur' }
            ],
          }
        };
      },
      methods: {
		  
		  getProductsInfo(){
			  this.axios.post('ProductsList', {})
			  .then(response => {
			  			this.tableData=response.data.message;
			   })
			  .catch(error => {
			     console.error(error);
			   });
		  },
		  
        submitForm(formName) {
            
			
            this.axios.post('/ProductsAdd', this.ruleForm)
			
           .then(response => {
              console.log(response.data);
			 // this.getProductsInfo();
			  this.$message.success('添加成功'); 
            })
			
			
           .catch(error => {
              console.error(error);
            });
        },
		
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }

}
</script>

<style scoped>
	
</style>